<script setup lang="ts">
import { EmployeeApi } from '@/apis'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { useTable } from '@/hooks'
import getAvatar from '@/utils/avatar'

const emit = defineEmits<{ (e: 'select', keys: string[]): void }>()

const visible = ref(false)
const selectedKeys = ref([])

const queryForm = reactive<EmployeeApi.EmployeeQuery>({
  status: 1,
  sort: ['createTime,desc'],
})

const {
  tableData: dataList,
  loading,
  pagination,
  search,
} = useTable(page => EmployeeApi.getPage({ ...queryForm, ...page }), { immediate: true })

const columns: TableInstanceColumns[] = [
  {
    title: '姓名',
    slotName: 'name',
    width: 120,
    ellipsis: true,
    tooltip: true,
    fixed: 'left',
  },
  { title: '手机号', dataIndex: 'mobilePhone', width: 140, ellipsis: true, tooltip: true },
  { title: '性别', slotName: 'gender', align: 'center', width: 100 },
  { title: '所属部门', dataIndex: 'orgName', ellipsis: true, tooltip: true, width: 180 },
  { title: '角色', dataIndex: 'roleNames', slotName: 'roleNames', width: 160 },
  { title: '状态', slotName: 'status', align: 'center', width: 80 },
  { title: '昵称', dataIndex: 'nickname', width: 120, ellipsis: true, tooltip: true },
]

const rowSelection = {
  type: 'radio',
  showCheckedAll: false,
  onlyCurrent: false,
}

const open = () => {
  visible.value = true
  selectedKeys.value = []
}

const onConfirm = async () => {
  if (selectedKeys.value.length > 0) {
    emit('select', selectedKeys.value)
  }
}

defineExpose({ open })
</script>

<template>
  <a-modal
    v-model:visible="visible"
    title="选择员工"
    width="90%"
    :ok-button-props="{ disabled: selectedKeys.length === 0 }"
    @before-ok="onConfirm"
  >
    <a-spin :loading="loading" tip="数据获取中..." style="width: 100%; height: 100%;">
      <ProTable
        v-model:selected-keys="selectedKeys"
        :data="dataList"
        :columns="columns"
        :loading="loading"
        :pagination="pagination"
        :row-selection="rowSelection"
        :disabled-tools="['size', 'setting']"
        :disabled-column-keys="['name']"
        @refresh="search"
        @select="onSelect"
      >
        <template #toolbar-left>
          <a-input v-model="queryForm.keyword" placeholder="请输入关键词" allow-clear @change="search">
            <template #prefix>
              <icon-search />
            </template>
          </a-input>
        </template>
        <template #name="{ record }">
          <CellAvatar :avatar="getAvatar(record.avatar, record.gender)" :name="record.name" is-link @click="onDetail(record)" />
        </template>
        <template #gender="{ record }">
          <CellGender :gender="record.gender" />
        </template>
        <template #roleNames="{ record }">
          <CellTags :data="record.roleNames" />
        </template>
        <template #status="{ record }">
          <CellStatus :status="record.status" />
        </template>
        <template #action="{ record }">
          <a-button type="text" @click.stop="">
            <span style="margin-right: 10px">选择</span>
            <icon-down />
          </a-button>
        </template>
      </ProTable>
    </a-spin>
  </a-modal>
</template>

<style lang="less" scoped>

</style>
